<script setup lang="ts" name="scss">
import { reactive } from 'vue';
const asideData = reactive([
    {
        id: 1,
        title: '按钮设计',
        href: '#button',
    },
    {
        id: 2,
        title: '背景',
        href: '',
    },
    {
        id: 3,
        title: '主题',
        href: '',
    },
    {
        id: 4,
        title: '的的萨芬',
        href: '',
    },
    {
        id: 5,
        title: '手动阀',
        href: '',
    },
])
</script>

<template>
    <div class="scss">
        <div class="aside">
            <div class="item" v-for="value in asideData" :key="value.id">
                <a :href="value.href">{{ value.title }}</a>
            </div>
        </div>
        <div class="container">
            <div class="header">
                <div class="title">
                    <span class="iconfont icon-scss icon"></span>
                    <span>SCSS使用技巧</span>
                </div>
                <div class="text">掌握变量、嵌套、混入、函数等核心能力</div>
                <div class="text">让 CSS 开发<b>更高效、可维护</b></div>
            </div>
            <div class="contentBtn">
                <div class="title" id="button">按钮设计</div>
                <div class="description">
                    <span class="left">描述：</span>
                    <span class="right">在设计按钮时，需要根据不同的状态，使用不同的颜色和样式来表现，你会怎么设计呢？</span>
                </div>
                <div class="example">
                    <div class="title">示例：</div>
                    <div class="btn">
                        <button class="normal">按钮</button>
                        <button class="plain">按钮</button>
                        <button class="disabled">按钮</button>
                    </div>
                    <div class="bar"></div>
                    <div class="code"></div>
                </div>
            </div>            
        </div>
    </div>
</template>

<style scoped lang="scss">
@use "../font/iconfont.css";
@use "../../../assets/styles/colorVar.scss" as *;
@use "sass:color" as color;
@use "sass:list" as list;
$items-gap:60px;


.scss{
    width: 100%;
    height: 1000rem;
    padding-left: 50px;
    display: flex;
    .aside{
        position: sticky;
        top: 60px;
        order: 1;
        width: 15%;
        height: fit-content;
        .item{
            width: 100%;
            padding: 10px;
            color:$color-primary-font;
            cursor: pointer;
            border: 1px solid list.nth($color-level, 3);
            border-left: 4px solid list.nth($color-level, 3 );
            border-radius: 0 10px;
            transition: all 0.2s ease-in-out;
            &:hover{
                color: list.nth($color-level, 5);
                background-color: list.nth($color-level, 3);
            }
        }
    }
    .container{
        width: 85%;
        .header{
            display: flex;
            flex-direction: column;
            row-gap: 10px;
            .title{
                span{
                    color:#cc6699;
                    font-weight: bold;
                    font-size: 40px;               
                }
                .icon{
                    font-size: 60px;
                }
            }
            .text{
                color: $color-primary-font;
                font-size: 25px;
                b{
                    font-weight: bold;
                    font-size: 25px;
                    font-family: 'Courier New', Courier, monospace;                    
                    color:list.nth($color-level, 5);
                }
            }
        }
        .contentBtn{
            margin-top:$items-gap;
            color:white;
            .title{
                color: list.nth($color-level, 5);
                font-weight: bold;
                font-size: 30px;
            }
            .description{
                margin-top: 20px;
                .left{
                    color: $color-title-font;
                    font-weight: bold;
                    font-size: 20px;
                }
                .right{
                    color: $color-primary-font;
                    font-size: 20px;
                }
            }
            .example{
                margin-top: 10px;
                .title{
                    color: $color-primary-font;
                    font-weight: bold;
                    font-size: 20px;
                }
                .btn{
                    $btn-color:#67c23a;
                    margin-top: 10px;
                    width: 100%;
                    height: 100px;
                    display: flex;
                    align-items: center;
                    justify-content: space-around;
                    border: 1px solid list.nth($color-level, 3);
                    button{
                        width: 100px;
                        height: 40px;
                        border: none;
                        border-radius: 5px;
                        cursor: pointer;
                        font-weight: 500;
                        color:white;
                    }
                    .normal{
                        background-color: $btn-color;
                        &:hover{
                            background-color: color.adjust($btn-color, $lightness: 10%);
                        }
                    }
                    .plain{
                        background-color: color.adjust($btn-color, $lightness: 20%);
                        border: 1px solid $btn-color;
                        color:$btn-color;
                        &:hover{
                            background-color: $btn-color;
                            color:white;
                        }
                    }
                    .disabled{
                        background-color: color.adjust($btn-color, $lightness: 25%);
                        cursor: not-allowed;
                    }
                }
                .bar{
                    width: 100%;
                    height: 30px;
                    border: 1px solid list.nth($color-level, 3);
                }
                .code{
                    width: 100%;
                    height: 200px;
                    border: 1px solid list.nth($color-level, 3);
                }
            }
        }
    }
}
</style>